<div [ngSwitch]="filterType">
  <mat-form-field *ngSwitchCase="'week_day'">
    <mat-select (selectionChange)="valueChange.emit($event.value)" [value]="value">
      <mat-option value="1">Sunday</mat-option>
      <mat-option value="2">Monday</mat-option>
      <mat-option value="3">Tuesday</mat-option>
      <mat-option value="4">Wednesday</mat-option>
      <mat-option value="5">Thursday</mat-option>
      <mat-option value="6">Friday</mat-option>
      <mat-option value="7">Saturday</mat-option>
    </mat-select>
  </mat-form-field>

  <div *ngSwitchCase="'isnull'">
    <mat-checkbox [checked]="getBoolean()" (change)="emitBoolean($event.checked)" arial-label="Is Null"></mat-checkbox>
  </div>

  <div *ngSwitchCase="'max'">
    <mat-checkbox [checked]="getBoolean()" (change)="emitBoolean($event.checked)" arial-label="Max (annotation-filter)"></mat-checkbox>
  </div>

  <div *ngSwitchCase="'min'">
    <mat-checkbox [checked]="getBoolean()" (change)="emitBoolean($event.checked)" arial-label="Min (annotation-filter)"></mat-checkbox>
  </div>

  <div *ngSwitchDefault [ngSwitch]="fieldType">
    <mat-form-field *ngSwitchCase="'DateField'">
      <input matInput [matDatepicker]="picker" [value]="date" (dateChange)="onDateChange($event.value.format('YYYY-MM-DD'))">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <div *ngSwitchCase="'DateTimeField'">
      <mat-form-field>
        <input matInput [matDatepicker]="picker" [value]="date" (dateChange)="onDateChange($event.value.format('YYYY-MM-DD'))">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      <mat-form-field>
        <mat-select [value]="time" (selectionChange)="onTimeChange($event.value)">
          <mat-option *ngFor="let option of timeOpts" [value]="option.value">
            {{option.display}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

    <div *ngSwitchCase="'BooleanField'">
      <mat-checkbox [checked]="getBoolean()" (change)="emitBoolean($event.checked)"></mat-checkbox>
    </div>

    <mat-form-field *ngSwitchDefault>
      <input matInput value="{{value}}" (keyup)="valueChange.emit($event.currentTarget.value)">
    </mat-form-field>
  </div>
</div>
